<template>
	<div class="demo-container flex z-10">
		<div class="demo-img">
			<img :src="loginMain" />
		</div>

		<el-tag class="demo-tag" type="primary" effect="dark">DEMO</el-tag>
		<el-tabs class="demo-tabs" :tab-position="tabPosition" v-model="selectedTab">
			<el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.label" :name="item.id" :lazy="true">
				<template #label>
					<span>{{ item.label }}</span>
					<el-icon style="vertical-align: middle; margin-left: 5px;">
						<component v-if="item.icon" :is="item.icon"></component>
					</el-icon>
				</template>
				<component :id="`component-${item.id}`" style="width: 100%; height: 100%;"
					v-if="item.id === selectedTab && item.component"
					:is="item.component"
					v-bind="item.data"
				></component>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup lang="ts" name="demo">
import { defineAsyncComponent, onMounted, ref } from 'vue';
import loginMain from '/@/assets/login-main.svg';

import type { TabsInstance } from 'element-plus'
const tabPosition = ref<TabsInstance['tabPosition']>('left')

const DashboardTemplate = defineAsyncComponent(() => import('/@/jqkit/jqkDashboard/dashboardTemplate.vue'));
const EchartLine = defineAsyncComponent(() => import('/@/jqkit/jqkECharts/echartLine.vue'));
const EchartBar = defineAsyncComponent(() => import('/@/jqkit/jqkECharts/echartBar.vue'));
const EchartPie = defineAsyncComponent(() => import('/@/jqkit/jqkECharts/echartPie.vue'));
const EchartGeo = defineAsyncComponent(() => import('/@/jqkit/jqkECharts/echartGeo.vue'));
import { dataSourceLine, dataSourceBar, dataSourcePie, dataSourceGeo } from '/@/jqkit/jqkECharts/echartTestDataSource';
const tabList = [
	{ id: 1, label: "可视化大屏系统模版", component: DashboardTemplate, icon: "DataBoard" },
	{ id: 2, label: "ECharts折线图", component: EchartLine, icon: "DataLine", data: { dataSource: dataSourceLine } },
	{ id: 3, label: "ECharts柱状图", component: EchartBar, icon: "DataAnalysis", data: { dataSource: dataSourceBar } },
	{ id: 4, label: "ECharts 饼图", component: EchartPie, icon: "PieChart", data: { dataSource: dataSourcePie } },
	{ id: 5, label: "ECharts 地图", component: EchartGeo, icon: "Position", data: { dataSource: dataSourceGeo } },
]
const selectedTab = ref(tabList[0].id)

// 页面加载时
onMounted(() => {
});
</script>

<style scoped lang="scss">
::v-deep .el-tabs__content {
	width: 100%;
	height: 100%;
	padding: 20px;
	.el-tab-pane {
		height: 100%;
		overflow-x: scroll;
	}
	.el-tab-pane::-webkit-scrollbar {
		display: none;
	}
}

.demo-container {
	height: 100%;
	background: var(--el-color-white);
	position: relative;
	background-color: rgba(211, 239, 255, 1);
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
	.demo-img {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		height: 52%;
		img {
			width: 100%;
			height: 100%;
			animation: error-num 0.6s ease;
		}
	}
	.demo-tag {
		height: 40px; 
		margin: 10px 20px;
	}
	.demo-tabs {
		width: 100%; 
		height: calc(100% - 60px);
	}
}
</style>
